<template>
  <h2>常用筛选器</h2>
  <filter-common
    :max-tab="6"
    :label-width="63"
    :can-save-filter="true"
    :is-save-local="true"
    filter-type="plan"
    :filter-arr="filterArr"
    :default-attr="defaultAttr"
    @updateList="updateList"
  >
    <template #fields="{selectedCondition,filterConditions}">
      <el-col v-for="domain in selectedCondition" :key="domain.key" :span="8">
        <el-form-item :label="domain.label" :prop="domain.key">
          <el-input v-if="domain.key==='name'" v-model="filterConditions.name" />
          <el-input v-if="domain.key==='age'" v-model="filterConditions.age" />
        </el-form-item>
      </el-col>
    </template>
  </filter-common>
  <code-editor :is-edit="false" v-model="filterJson" language="json" width="100%" style="margin-top: 10px;" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FilterCommon from './FilterView.vue'
import CodeEditor from '@/components/CodeEditor.vue'
const filterArr: any = [
  {
    default: 0,
    filterAttrs: [
      { key: 'name', show: true, value: ['李谦'] },
      { key: 'age', show: true, value: [33] }
    ],
    filterName: '查询条件',
    filterType: 'plan',
    id: 101,
    isCurrent: true,
    isSystem: 1,
    selected: 1
  }
]
const defaultAttr: any = {
  FILTERS: [
    { isArray: false, key: 'name', label: '姓名', show: true },
    { isArray: false, key: 'age', label: '年龄', show: true }
  ]
}

const filterJson = ref('')
const updateList = (val: any) => {
  filterJson.value = JSON.stringify(val, null, 2)
}
</script>
